<!DOCTYPE html>
<html lang="en" dir="ltr">
    <head>
        <meta charset="utf-8">
        <title></title>
        <link rel="stylesheet" type="text/css" media="screen" href="css/anthracite.css">
    </head>
    <body>
        <header class="DS-header">
            <h1 class="DS-header--title">Anthracite</h1>
            <p class="DS-header--description">Data &amp; Styles auto imported from Sass/CSS</p>
        </header>

        <div id="sections"></div>


        <script type="text/template" id="section">
            <section class="DS-section" data-collectionType="%%collectionTitle%%">
                <h1 class="DS-section--header toggle">%%collectionTitle%%</h1>
                <button type="button" class="toggle-all button-default">Toggle</button>
                %%collections%%
            </section>
        </script>

        <script type="text/template" id="collection">
            <div class="DS-sectionGroup %%class%%">
                <div class="DS-sectionGroup--swatch"></div>
                <h2 class="DS-sectionGroup--header toggle" data-hasSwatch="%%hasSwatch%%">%%header%%</h2>

                <div class="DS-sectionSubGroup">
                    <p class="DS-sectionSubGroup--description">Blah Blah Blah Blah</p>
                    <ul>
                        <li class="colheadergroup">
                            <div class="colheader example"></div>
                            <div class="colheader variant">Key</div>
                            <div class="colheader value">Value</div>
                            <div class="colheader key">Include</div>
                        </li>
                        %%items%%
                    </ul>
                </div>

            </div>
        </script>

        <script type="text/template" id="item">
            <li class="%%class%%">
                <div class="example %%collectionType%%"></div>
                <div class="variant"></div>
                <div class="value"></div>
                <div class="key"><button type="button" class="copy-button">Copy</button></div>
            </li>
        </script>

        <script>

            var DS = {
                data: {
                    toastTimer: null
                },
                DOM: {
                    toggles: document.getElementsByClassName("toggle"),
                    toggleAlls: document.getElementsByClassName("toggle-all"),
                    copyButtons: document.getElementsByClassName("copy-button"),
                },
                templates: {
                    section: document.getElementById("section").innerHTML,
                    collection: document.getElementById("collection").innerHTML,
                    item: document.getElementById("item").innerHTML,
                },
                cssData: {},
                methods: {
                    copyToClipboard(text) {
                        var clipboard = document.getElementById("clipboard"),
                            toast = document.getElementById("toast"),
                            toastMessage = document.querySelectorAll("#toast .message")[0];

                        // Add text to the input
                        clipboard.value = text.replace(/"/gi, "");

                        // Select the text field
                        clipboard.select();
                        clipboard.setSelectionRange(0, 99999); /*For mobile devices*/

                        // Copy the text inside the text field
                        document.execCommand("copy");

                        toast.classList.add("on");
                        toastMessage.innerHTML = clipboard.value;

                        clearTimeout(DS.data.toastTimer);

                        DS.data.toastTimer = setTimeout(function(){
                            document.getElementById("toast").classList.remove("on");
                        }, 1500)

                    },
                    buildCollection: function(props){
                        var COLLECTIONSnippet = "";

                        for(var item in props.data){
                            COLLECTIONSnippet += DS.templates.collection,
                            ITEMSnippet = "";

                            // REPLACE TITLE
                            COLLECTIONSnippet = COLLECTIONSnippet.replace(/%%header%%/gi, item);
                            COLLECTIONSnippet = COLLECTIONSnippet.replace(/%%class%%/gi, props.classPrefix + "-" + item);

                            for(var variant in props.data[item]){
                                ITEMSnippet += DS.templates.item;
                                ITEMSnippet = ITEMSnippet.replace(/%%collectionType%%/gi, props.classPrefix);
                                ITEMSnippet = ITEMSnippet.replace(/%%class%%/gi, props.classPrefix + "-" + item + "-" + props.data[item][variant]);
                            }
                            COLLECTIONSnippet = COLLECTIONSnippet.replace(/%%items%%/gi, ITEMSnippet);
                            COLLECTIONSnippet = COLLECTIONSnippet.replace(/%%hasSwatch%%/gi, props.collectionHasSwatch);
                        }

                        return COLLECTIONSnippet;

                    },
                    buildAll: function(){

                        var sections = "";

                        for(var classPrefix in DS.cssData){
                            console.log("BUILD: ", classPrefix);
                            var SECTIONSnippet = DS.templates.section,
                                collections = DS.methods.buildCollection({
                                    data: DS.cssData[classPrefix],
                                    classPrefix: classPrefix,
                                    collectionHasSwatch: true
                                });

                            SECTIONSnippet = SECTIONSnippet.replace(/%%collections%%/gi, collections);
                            SECTIONSnippet = SECTIONSnippet.replace(/%%collectionTitle%%/gi, classPrefix);

                            sections += SECTIONSnippet.replace(/%%collections%%/gi, collections);
                        }

                        document.getElementById("sections").innerHTML = sections;
                    },
                    getCSSData(){
                        // Get the CSS DATA and convert to JSON
                        var bodyStyle = getComputedStyle(document.body),
                            cssData = bodyStyle.getPropertyValue('content');

                        // Prepare the string for JSON conversion
                        cssData = cssData.replace(/,},/gi, "},");
                        cssData = cssData.replace(/,]/gi, "]");
                        cssData = cssData.replace(/'/gi, "\"");
                        cssData = cssData.replace(/],}/gi, "]}");
                        cssData = cssData.substring(1, cssData.length-1);

                        // Convert to JSON
                        cssData = JSON.parse(cssData);

                        return cssData
                    },
                    init: function(){
                        DS.cssData = DS.methods.getCSSData();
                        DS.methods.buildAll();
                        DS.methods.addEventListeners();
                    },
                    addEventListeners: function(){
                        // Copy Button listeners
                        for(var n = 0; n < DS.DOM.copyButtons.length; n ++){
                            DS.DOM.copyButtons[n].addEventListener("click", function(){
                                var pseudoText = window.getComputedStyle(this.parentNode, ":before").content;
                                DS.methods.copyToClipboard(unescape(pseudoText));
                            })
                        }

                        // Toggle Buttons
                        for(var n = 0; n < DS.DOM.toggles.length; n ++){
                            DS.DOM.toggles[n].addEventListener("click", function(){
                                this.parentNode.classList.toggle("open");
                            })
                        }

                        // Toggle ALL buttons
                        for(var n = 0; n < DS.DOM.toggleAlls.length; n ++){
                            DS.DOM.toggleAlls[n].addEventListener("click", function(){
                                console.log("TOGGLE ALL");
                                var SectionGroups = this.parentNode.getElementsByClassName("DS-sectionGroup"),
                                    classAction;

                                if(this.parentNode.classList.contains("all-open")){
                                    classAction = "remove";
                                } else {
                                    classAction = "add";
                                }

                                for(var n = 0; n < SectionGroups.length; n ++){
                                    SectionGroups[n].classList[classAction]("open");
                                }

                                this.parentNode.classList.toggle("all-open");
                            })
                        }
                    }
                }
            }

            DS.methods.init();

        </script>

        <input type="text" id="clipboard" />

        <div id="toast">
            <div class="message">Copied to clipboard</div>
        </div>

    </body>
</html>
